<template>
	<view class="person">
		<view @click="open">
			<contact-way  class="module"></contact-way>
			<my-relation ref="popups"></my-relation>
			<my-draw ref="popupShow"></my-draw>
		</view>
		<view class="details">
			<view class="title">
				<view class="concent">{{datails.title}}</view>
				<view class="time">发布时间：{{datails.time}}</view>
			</view>
			<view class="communicate">
				<view class="communicate-people">
					<view class="image">
						<image src="../../static/警告.png" mode=""></image>
					</view>
					<view class="phone">
						<view class="name">{{datails.name}}</view>
						<view v-if="temp" class="phoneNumber">{{phone}}</view>
						<view v-else class="phoneNumber">{{datails.phone}}</view>
						<view @click="look(1)" class="btn">查看招工电话</view>
					</view>
				</view>
				<view class="explain">
					联系我时请说明是在“
					<view class="highlight ">鱼泡网</view>
					”看到的
				</view>
			</view>
			<view class="describe">
				<view class="title-describe">项目描述</view>
				<view v-for="(item,index) in datails.project" :key="index">
					<view class="project">{{item}}</view>
				</view>
				<uni-collapse>
					<uni-collapse-item ref="add" title="点击查看具体需求" :show-animation="true" :open="false">
						这是一段长文字，高度会发生变化。这是一段长文字，高度会发生变化。这是一段长文字，高度会发生变化。这是一段长文字，高度会发生变化。这是一段长文字，高度会发生变化。这是一段长文字，高度会发生变化。这是一段长文字，高度会发生变化。这是一段长文字，高度会发生变化。这是一段长文字，高度会发生变化。这是一段长文字，高度会发生变化。
					</uni-collapse-item>
				</uni-collapse>
			</view>
			<view class="map">
				<view class="map-title">项目地址</view>
				<view class="address">{{datails.address}}</view>
				<view @click="map(1)" class="examine-map">
					<image src="../../static/address.jpg"></image>
					查看地图
				</view>
			</view>
		</view>
		
		<view class="hint">
			<view class="title">
				<image src="../../static/警告.png"></image>
				鱼泡提示
			</view>
			<view class="warm-prompt">
				<navigator url="/pages/employment/guide">《防骗指南》</navigator>
				：此信息由鱼泡网用户提供，但联系时仍需注意识别 信息真伪。
			</view>
			<view class="attention">关注“鱼泡网”微信公众号接收新工作提醒
				<navigator url="/pages/employment/attention">如何关注</navigator>
			</view>
		</view>

		<view class="recommend">
			<view class="left"></view>
			<view class="concent">附近适合您的工作</view>
			<view class="right"></view>
		</view>
		<view v-for="(message,index) in messages" :key="index">
			<view @click="person(message.id)">
				<my-recruit :people="message"></my-recruit>
			</view>
			<view v-if="index == messages.length-1" class="more">查看更多招工信息</view>
		</view>
		<view class="operate">
			<view class="collect">
				<image src="../../static/收藏_03.jpg" mode=""></image>
				<image v-if="false" src="../../static/找活名片_03-03.jpg" mode=""></image>
				收藏
			</view>
			<view class="complaint">
				<image src="../../static/招工详情_07-03.jpg" mode=""></image>
				投诉
			</view>
			<view @click="openDraw" class="share">
				<image src="../../static/招工详情_07-04.jpg"></image>
				分享
			</view>
			<view class="look">查看招工电话</view>
		</view>
		<view class="gain-image">
			<image src="../../static/招工详情_03.jpg"></image>
		</view>
	</view>
</template>

<script>
	import myRecruit from '../../components/recruits.vue'
	import contactWay from '../../components/contactway.vue'
	import uniCollapse from '../../components/uni-collapse/uni-collapse.vue'
	import uniCollapseItem from '../../components/uni-collapse-item/uni-collapse-item.vue'
	import myRelation from '../../components/relation.vue'
	import myDraw from '../../components/draw.vue'
	export default {
		data() {
			return {
				phone: "",
				temp: true,
				show: false,
				datails: {
					title: "这是一段长文字，高度会发生变化。这是一段长文字，高度会发生变化。这是一段长文字，高度会发生变化。这是一段长文字，高度会发生变化。这是一段长文字，高度会发生变化。这是一段长文字，高度会发生变化。这是一段长文字，高度会发生变化。这是一段长文字，高度会发生变化。这是一段长文字，高度会发生变化。这是一段长文字，高度会发生变化。",
					name: "李先生",
					phone: "13445678911",
					time: "2020",
					project: ["电工/弱电", "小工/杂工"],
					introduce: "北京大兴招工电话",
					address: "北京"
				},
				messages: [{
					id: 1,
					title: "测试123456789asdasdaddad",
					top: true,
					image: "../../static/首页ok_29-17.jpg",
					name: "李先生",
					concent: "招聘信息asdasdadadssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss",
					recruiting: true,
					address: "广州",
					time: "2020-10-15 10:03"
				}, ]
			};
		},
		onLoad() {
			var pho = this.datails.phone;
			this.phone = (pho.substring(0, 7)) + "****"
		},
		components: {
			'contactWay': contactWay,
			'uniCollapse': uniCollapse,
			'uniCollapseItem': uniCollapseItem,
			'myRecruit': myRecruit,
			'myDraw': myDraw,
			'myRelation': myRelation
		},
		methods: {
			openDraw() {
				this.$refs.popupShow.$refs.popupShow.open()
			},
			open() {
				this.$refs.popups.$refs.popups.open()
			},
			person(id) {
				uni.navigateTo({
					url: "/pages/employment/person?id=" + id
				})
			},
			map(id) {
				uni.navigateTo({
					url: "/pages/employment/map?id=" + id
				})
			},
			look(id) {
				this.temp = false
			},
			share() {
				this.show = true
			},
			exhibition(isShow) {
				this.show = isShow
			}

		}
	}
</script>

<style lang="scss">
	.person {
		.module /deep/ .massage {
			margin-top: 0;
		}
	}
</style>
<style lang="scss">
	.person {
		background: #eaeaea;
		padding-bottom: 160rpx;

		.details {
			padding: 20rpx 40rpx;
			background: #FFFFFF;
			display: flex;
			flex-direction: column;
			margin-bottom: 20rpx;

			.title {
				border-bottom: solid 1px #C0C0C0;

				.concent {
					font-weight: bold;
					font-size: 38rpx;
				}

				.time {
					color: #999999;
					margin-top: 14rpx;
					margin-bottom: 30rpx;
				}
			}

			.communicate {
				margin-bottom: 30rpx;
				padding-bottom: 30rpx;
				border-bottom: solid 1px #C0C0C0;

				.communicate-people {
					display: flex;
					padding: 40rpx 20rpx;

					.image {
						width: 140rpx;
						height: 140rpx;
						border-radius: 999rpx;
						border: solid 2px #0059ff;
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							width: 140rpx;
							height: 140rpx;
							border-radius: 999rpx;
						}
					}

					.phone {
						position: relative;
						margin-left: 30rpx;

						.name,
						.phoneNumber {
							font-weight: bold;
							font-size: 38rpx;
							line-height: 80rpx;
						}

						.btn {
							background: #007AFF;
							color: #FFFFFF;
							font-size: 28rpx;
							padding: 14rpx 30rpx;
							border-radius: 10rpx;
							position: absolute;
							right: -250rpx;
							top: 50rpx;
						}
					}
				}

				.explain {
					background: #dedede;
					border-radius: 99rpx;
					display: flex;
					padding: 6rpx 20rpx;
					align-items: center;
					justify-content: center;

					.highlight {
						color: #E04B28;
					}
				}

			}

			.describe {
				.title-describe {
					font-weight: bold;
					font-size: 40rpx;
					margin-bottom: 20rpx;
				}

				.project {
					display: inline-block;
					padding: 0 28rpx;
					margin-bottom: 8rpx;
					background: #e2e1e6;
					color: #848484;
					border-radius: 6rpx;
				}

				.concent {
					max-height: 100rpx;
					color: #848484;
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: 34rpx;
				}
			}

			.map {
				padding: 30rpx 20rpx;
				position: relative;

				.map-title {
					font-weight: bold;
					font-size: 42rpx;
				}

				.address {
					color: #848484;
					font-size: 36rpx;
					line-height: 80rpx;
				}

				.examine-map {
					display: flex;
					font-size: 38rpx;
					color: #007AFF;
					position: absolute;
					right: 0;
					top: 50rpx;

					image {
						width: 60rpx;
						height: 60rpx;
						margin-right: 10rpx;
					}
				}
			}
		}

		.hint {
			padding: 30rpx 40rpx;
			background: #FFFFFF;
			margin-bottom: 30rpx;

			.title {
				display: flex;
				color: #ff0000;
				font-size: 34rpx;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}
			}

			.warm-prompt {
				margin-bottom: 30rpx;

				navigator {
					display: inline;
					color: #007AFF;
					line-height: 60rpx;
				}
			}

			.attention {
				margin-bottom: 30rpx;

				navigator {
					display: inline;
					color: #007AFF;
					margin-left: 14rpx;
				}
			}
		}

		.recommend {
			display: flex;
			background: #FFFFFF;
			justify-content: center;
			align-items: center;
			height: 140rpx;
			margin-bottom: 30rpx;

			.left,
			.right {
				width: 180rpx;
				border-bottom: solid 1px #c0c0c0;
			}

			.concent {
				margin: 0 20rpx;
				font-size: 40rpx;
			}
		}

		.more {
			text-align: center;
			background: #FFFFFF;
			color: #007AFF;
			font-size: 44rpx;
			line-height: 120rpx;
		}

		.operate {
			width: 100vw;
			display: flex;
			padding: 20rpx 50rpx;
			background: #FFFFFF;
			border-top: solid 1px #C0C0C0;
			position: fixed;
			bottom: 0;
			align-items: center;

			.collect,
			.complaint {

				margin-right: 80rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					width: 80rpx;
					height: 80rpx;
				}
			}

			.share {
				margin-right: 40rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					width: 80rpx;
					height: 80rpx;
				}
			}

			.look {
				height: 60rpx;
				border-radius: 99rpx;
				padding: 10rpx 20rpx;
				background: linear-gradient(to right, #006eff, #0019ff);
				color: #FFFFFF;
			}
		}

		.gain-image {
			display: flex;
			flex-direction: column;
			width: 120rpx;
			position: fixed;
			bottom: 500rpx;
			right: 30rpx;
			background: #0062CC;
			image {
				width: 160rpx;
				height: 160rpx;
			}

			.gain {
				color: #007AFF;
				background: #FFFFFF;
				font-size: 40rpx;
				font-weight: bold;
				border: solid 1px #999999;
				padding: 0 10rpx;
			}
		}

	}
</style>
